<!DOCTYPE html>
<html>
<head>
    <title>面向中心句自动文本摘要系统</title>
    <script src="/resources/statistics.js"></script>
    <link rel="shortcut icon" href="/resources/favicon.ico"/>
    <link rel="bookmark" href="/resources/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="/resources/login/css/set1.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/particles.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/load.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/component_button.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/login/css/component_modal.css"/>
    <style>
html, body {
	margin: 0;
	height: 100%;
}

h1 {
	margin: 0;
}

.main-container {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y:scroll;
	position: relative;
}

.middle {
	position: absolute;
	width: 70%;
	text-align: center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-height: 400px;
}

.title {
	font: 70px microsoft yahei;
	text-align: center;
	color: #b04b40;
	text-shadow: 0px 2px 3px #555;
	font-weight: bolder;
}

/*.title:hover {*/
/*color: #a0a0a0;*/
/*text-shadow: 0px 5px 8px #2a2a2a;*/
/*}*/
textarea {
	border: 0;
	background-color: transparent;
	/*scrollbar-arrow-color:yellow;  	scrollbar-base-color:lightsalmon;  	overflow: hidden;*/
	color: white;
	height: auto;
	
}
</style>
</head>
<body>
<div class="main-container">
    <div style="text-align: center">
        <div class="logo">
            <h1 class="title">面向中心句自动文本摘要系统</h1>
        </div>
        <div class="input">
				<table border="1" id="tb" align="center" width="1000px" >					
					<caption><font id="time" color="white" size="5">任务列表情况</font></caption>
					<tr height="50px">
					    <th width="5%"><font color="white" size="5">序号</font></th>
						<th width="20%"><font color="white" size="5"> 任务ID</font></th>
						<th width="20%"><font color="white" size="5">结果名称</font></th>
						<th width="10%"><font color="white" size="5">提交时间</font></th>
						<th width="10%"><font color="white" size="5">结束时间</font></th>
						<th width="10%"><font color="white" size="5">状态</font></th>
						<th width="10%"><font color="white" size="5">删除</font></th>
					</tr>
					<tr height="50px">
    					<td colspan="7"><font color="white" size="5">无数据</font></td>
  					</tr>
  					
				</table>
			</div>
        <div class="hi-icon-wrap hi-icon-effect-8"> <!--图标 http://support.i3dthemes.com/product-components/hover-icons/ -->
            <a href="/Input/main" class="hi-icon hi-icon-archive">Archive</a>
            <a onclick="switchTimeEvent()" class="hi-icon hi-icon-clock">Clock</a>
            <a onclick="removeOld()" class="hi-icon hi-icon-refresh">Refresh</a>
            <a href="/logout" class="hi-icon hi-icon-user">Contract</a>
        </div>
    </div>
</div>
<div id="scene" class="scene unselectable"
     data-friction-x="0.1"
     data-friction-y="0.1"
     data-scalar-x="25"
     data-scalar-y="15">
    <div id="particles-js" style="" class="layer" data-depth="0.3"></div>
</div>
<div id="loader-container" class="loader-container">
    <div class='base'>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
        <div class='cube'></div>
    </div>
    <div class="load-title">加载中...</div>
    <%--<div class="mask"></div>--%>
</div>

<input type="button" style="display: none" class="md-trigger" data-modal="modal-1" id="click"/>
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3 id="msg_head">警告</h3>
        <div>
            <p id="msg"></p>
            <input type="button" class="md-close" value="关闭"/>
        </div>
    </div>
</div>
<script src="/resources/jquery.min.js"></script>
<script src="/resources/login/js/parallax.js"></script>
<script src="/resources/login/js/classie.js"></script>
<script src="/resources/jquery.min.js"></script>
<script src="/resources/particles.js"></script>
<script src="/resources/login/js/modalEffects.js"></script>

<script>
		if (typeof(EventSource) !== "undefined") {
			var eventSource = new EventSource("/Output/info");
			
	        eventSource.onmessage = function (event) {
	        	 var data =JSON.parse(event.data);
		         var tb = document.getElementById('tb');
		         var rowNum=tb.rows.length;
			   	 for (i=1;i<rowNum;i++)
			   	 {
			   	    tb.deleteRow(i);
			   	    rowNum=rowNum-1;
			   	    i=i-1;
			   	 }
			   	 if(data.length <=0 )
			   		{
			   			var x=document.getElementById('tb').insertRow();
			   			x.innerHTML='<td colspan="7"><font color="white" size="5">无数据</font></td>';
			   		 }
			   	 for(var i=0;i < data.length;i++){
	                 var x=document.getElementById('tb').insertRow();                 
                     var cell=x.insertCell();
                     cell.innerHTML='<font color="white" style="word-break:break-all" size="3">' + i + '</font>';
                     cell=x.insertCell();
                     cell.innerHTML='<font color="white" style="word-break:break-all" size="3">'+data[i].id+'</font>';
                     cell=x.insertCell();
                     if(data[i].status == "Finished" || data[i].status == "Completed")
                     	cell.innerHTML='<a href="/Output/getResult?result_name='+data[i].result_name+'"><font title="'+JSON.stringify(data[i].paras).replace(/,/g,',\n').replace(/,/g,',\n').replace(/"/g,'')+'" color="white" style="word-break:break-all" size="3">'+data[i].result_name+'</font></a>';
                     else
                    	cell.innerHTML='<font color="white" title="'+JSON.stringify(data[i].paras).replace(/,/g,',\n').replace(/,/g,',\n').replace(/"/g,'')+'" style="word-break:break-all" size="3">'+data[i].result_name+'</font>';
                     cell=x.insertCell();
                     cell.innerHTML='<font color="white" style="word-break:break-all" size="3">'+data[i].create_time+'</font>';
                     cell=x.insertCell();
                     cell.innerHTML='<font color="white" style="word-break:break-all"  size="3">'+data[i].finish_time+'</font>';
                     cell=x.insertCell();
                     cell.innerHTML='<font color="white" style="word-break:break-all" size="3">'+data[i].status+'</font>';
                     cell=x.insertCell();
                     cell.innerHTML='<a href="javascript:removeTask(\''+data[i].id+'\')"><font color="white" style="word-break:break-all" size="3">删除</font>';      
	             }
			   	  
	        }	        
	        eventSource.addEventListener('error', function (event) {
	            console.log("错误：" + event);
	        });
	        eventSource.addEventListener('open', function (event) {
	            console.log("建立连接：" + event);
	        });
	    }
	    else {
	        document.getElementById("tb").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件 ...";
	    }
		timeEventSource = undefined;
		isTimeOpen = false;
		function switchTimeEvent(){
			if(isTimeOpen){
				document.getElementById("time").innerHTML = "任务列表情况";
				isTimeOpen= false;
				timeEventSource.close();
			}
			else{
				if (typeof(EventSource) !== "undefined") {
					timeEventSource = new EventSource("/Output/getDate");
					
					timeEventSource.onmessage = function (event) {
			        	document.getElementById("time").innerHTML = "任务列表情况,当前服务器时间："+event.data;
					   	  
			        }	        
					timeEventSource.addEventListener('error', function (event) {
			            console.log("错误：" + event);
			        });
					timeEventSource.addEventListener('open', function (event) {
			            console.log("建立连接：" + event);
			        });
			    }
			    else {
			        document.getElementById("time").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件 ...";
			    }
				isTimeOpen = true;
			}
				
		}	
		
		function removeTask(taskid)
		{
			$.post("/Output/rmTask",{taskid:taskid}, function (data) {
				alert(data);
			});
		}
		function removeOld(){
			 $.post("/Output/removeOld",{}, function (data) {
			    alert(data);
			 });
		}
		
    (function () {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function () {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function () {
                    return this.replace(rtrim, '');
                };
            })();
        }

        [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
            // in case the input is already filled..
            if (inputEl.value.trim() !== '') {
                classie.add(inputEl.parentNode, 'input--filled');
            }

            // events:
            inputEl.addEventListener('focus', onInputFocus);
            inputEl.addEventListener('blur', onInputBlur);
        });

        function onInputFocus(ev) {
            classie.add(ev.target.parentNode, 'input--filled');
        }

        function onInputBlur(ev) {
            if (ev.target.value.trim() === '') {
                classie.remove(ev.target.parentNode, 'input--filled');
            }
        }

        $scene = $('#scene');
        var parallax = new Parallax($scene[0]);
//        (resize = function() {
//            $scene.css("width",  window.innerWidth + 'px');
//            $scene.css("height", window.innerHeight + 'px');
//
//        })();
    })();


</script>

</body>
</html>